<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jq/jquery.js"></script>
    <script src="/js/template-web.js"></script>

</head>
<body>
    <input type="text" id="classId">
    <input type="button" value="查询" onclick="queryClassById()">
    <table border="1" width="500" cellspacing="0">
        <thead>
            <tr>
                <th>班级编号</th>
                <th>班级名称</th>
            </tr>
        </thead>

        <!-- 定义一个容器 -->
        <tbody>
            
        </tbody>
    </table>

    <!-- 定义一个模板 -->
    <script type="text/html" id="demo">
        {{ each list value index }}
            <tr>
                <td>{{ value.id }}</td>
                <td>{{ value.name }}</td>
            </tr>
        {{/each}}
    </script>

    <script type="text/html" id="demo2">
        <tr>
            <td>{{ id }}</td>
            <td>{{ name }}</td>
        </tr>
    </script>

    <script>
        async function  showClassList(){
            let result=await $.ajax("/jquery/queryClassList").promise();
            let str=template("demo",{list:result});
            $("tbody").html(str);
        }
        showClassList();

        function queryClassById(){
            let id=$("#classId").val();
            $.ajax({
                url:"/jquery/queryClassName",
                data:{id:id},
                success:function(data){

                    let str=template("demo2",data);
                    $("tbody").html(str);
                }
            });
        }

        
    </script>
</body>
</html>